{% extends "base.html" %}

{% block title %}创建活动 - 城会玩{% endblock %}
{% block style %}
    <style>
        /* 页面专属样式 - 优化间隙 */
        .page-container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 0 15px;
        }

        .create-activity-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 15px 10px; /* 减小上下内边距 */
        }

        .activity-form-card {
            background: white;
            border-radius: 12px; /* 稍微减小圆角 */
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* 减小阴影 */
            border: none;
            overflow: hidden;
            margin-bottom: 1.5rem; /* 减小底部间距 */
        }

        .form-header {
            background: linear-gradient(135deg, var(--primary) 0%, #e55a2b 100%);
            color: white;
            padding: 1.5rem 2rem; /* 减小内边距 */
            text-align: center;
        }

        .form-header h1 {
            margin: 0;
            font-weight: 600;
            font-size: 1.5rem; /* 稍微减小标题大小 */
        }

        .form-header p {
            margin: 0.4rem 0 0 0; /* 减小上边距 */
            opacity: 0.9;
            font-size: 0.9rem;
        }

        .form-body {
            padding: 1.5rem; /* 减小内边距 */
        }

        .form-section {
            margin-bottom: 1.5rem; /* 减小间距 */
            padding-bottom: 1rem; /* 减小内边距 */
            border-bottom: 1px solid #e9ecef;
        }

        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .section-title {
            font-size: 1.1rem; /* 减小标题大小 */
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 0.8rem; /* 减小底部间距 */
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .form-control, .form-select {
            border: 1.5px solid #e9ecef; /* 减小边框宽度 */
            border-radius: 8px; /* 减小圆角 */
            padding: 0.6rem 0.8rem; /* 减小内边距 */
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.1); /* 减小聚焦阴影 */
        }

        textarea.form-control {
            min-height: 80px; /* 减小最小高度 */
            resize: vertical;
        }

        #highlights, #schedule, #notes {
            overflow: hidden;
        }

        .required-label::after {
            content: " *";
            color: #dc3545;
        }

        .btn-create {
            background: linear-gradient(135deg, var(--primary) 0%, #e55a2b 100%);
            border: none;
            border-radius: 8px; /* 减小圆角 */
            padding: 0.8rem 1.5rem; /* 减小内边距 */
            font-weight: 600;
            font-size: 15px;
            color: white;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 0.8rem; /* 减小上边距 */
        }

        .btn-create:hover {
            transform: translateY(-1px); /* 减小悬停位移 */
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25); /* 减小阴影 */
        }

        .character-count {
            font-size: 11px; /* 稍微减小字体 */
            color: #6c757d;
            text-align: right;
            margin-top: 0.2rem; /* 减小上边距 */
        }

        .character-count.warning {
            color: #ffc107;
        }

        .character-count.danger {
            color: #dc3545;
        }

        .image-upload-area {
            border: 1.5px dashed #dee2e6; /* 减小边框宽度 */
            border-radius: 8px; /* 减小圆角 */
            padding: 1.5rem; /* 减小内边距 */
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fafbfc;
        }

        .image-upload-area:hover {
            border-color: var(--primary);
            background-color: rgba(255, 107, 53, 0.1);
        }

        .image-preview {
            max-width: 180px; /* 稍微减小预览图大小 */
            max-height: 135px;
            border-radius: 6px;
            display: none;
            margin-top: 0.8rem; /* 减小上边距 */
        }

        .form-text {
            font-size: 11px; /* 稍微减小字体 */
            color: #6c757d;
            margin-top: 0.2rem; /* 减小上边距 */
        }

        .alert {
            border-radius: 8px; /* 减小圆角 */
            border: none;
            padding: 0.8rem 1rem; /* 减小内边距 */
            margin-bottom: 1rem; /* 减小底部间距 */
        }

        /* 地图相关样式 */
        .map-container {
            margin-top: 0.8rem; /* 减小上边距 */
            border-radius: 8px; /* 减小圆角 */
            overflow: hidden;
            border: 1.5px solid #e9ecef; /* 减小边框宽度 */
        }

        #map {
            height: 250px; /* 稍微减小地图高度 */
            width: 100%;
        }

        .map-controls {
            display: flex;
            gap: 8px; /* 减小间隙 */
            margin-bottom: 8px; /* 减小底部间距 */
        }

        .map-search-box {
            flex: 1;
        }

        .btn-location {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px; /* 减小圆角 */
            padding: 6px 12px; /* 减小内边距 */
            cursor: pointer;
            transition: background 0.3s ease;
            white-space: nowrap;
            font-size: 13px; /* 稍微减小字体 */
        }

        .btn-location:hover {
            background: #e55a2b;
        }

        .btn-location:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .coordinates-display {
            margin-top: 8px; /* 减小上边距 */
            padding: 8px; /* 减小内边距 */
            background: #f8f9fa;
            border-radius: 6px; /* 减小圆角 */
            font-size: 11px; /* 稍微减小字体 */
            color: #6c757d;
        }

        .location-info {
            margin-top: 8px; /* 减小上边距 */
            padding: 8px; /* 减小内边距 */
            background: #f8f9fa;
            border-radius: 6px; /* 减小圆角 */
            font-size: 13px; /* 稍微减小字体 */
        }

        .map-tips {
            font-size: 11px; /* 稍微减小字体 */
            color: #6c757d;
            margin-top: 4px; /* 减小上边距 */
        }

        .loading-spinner {
            display: inline-block;
            width: 14px; /* 稍微减小大小 */
            height: 14px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 表单行间距优化 */
        .row {
            margin-bottom: 0.5rem; /* 减小行间距 */
        }

        .mb-3 {
            margin-bottom: 0.8rem !important; /* 减小底部间距 */
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .create-activity-container {
                padding: 10px 5px;
            }

            .form-header {
                padding: 1rem 1.5rem;
            }

            .form-body {
                padding: 1rem;
            }

            #map {
                height: 200px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <!-- 导航栏 -->
    {% include 'nav.html' %}

    <!-- 页面容器 -->
    <div class="page-container">
        <div class="create-activity-container">
            <div class="activity-form-card">
                <div class="form-header">
                    <h1><i class="fas fa-plus-circle me-2"></i>创建新活动</h1>
                    <p>分享您的精彩活动，邀请志同道合的朋友一起参与</p>
                </div>

                <div class="form-body">
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show">
                                <i class="fas fa-{% if message.tags == 'error' %}exclamation-circle{% else %}check-circle{% endif %} me-2"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}

                    <form method="post" enctype="multipart/form-data" id="activityForm">
                        {% csrf_token %}

                        <!-- 基本信息 -->
                        <div class="form-section">
                            <h3 class="section-title">
                                <i class="fas fa-info-circle"></i>基本信息
                            </h3>

                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="title" class="form-label required-label">活动标题</label>
                                    <input type="text" class="form-control" id="title" name="title"
                                           value="{{ form_data.title|default:'' }}"
                                           placeholder="请输入活动标题" required maxlength="200">
                                    <div class="character-count" id="titleCount">0/200</div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="category" class="form-label required-label">活动分类</label>
                                    <select class="form-select" id="category" name="category" required>
                                        <option value="">请选择分类</option>
                                        {% for category in categories %}
                                            <option value="{{ category.id }}"
                                                    {% if form_data.category == category.id|stringformat:"i" %}selected{% endif %}>
                                                {{ category.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="max_participants" class="form-label required-label">最大参与人数</label>
                                    <input type="number" class="form-control" id="max_participants" name="max_participants"
                                           value="{{ form_data.max_participants|default:'10' }}"
                                           min="1" max="1000" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label required-label">活动描述</label>
                                <textarea class="form-control" id="description" name="description"
                                          placeholder="请详细描述活动内容、特色等..."
                                          required rows="3">{{ form_data.description|default:'' }}</textarea>
                                <div class="character-count" id="descriptionCount">0/不限</div>
                            </div>
                        </div>

                        <!-- 时间地点 -->
                        <div class="form-section">
                            <h3 class="section-title">
                                <i class="fas fa-map-marker-alt"></i>时间地点
                            </h3>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="start_time" class="form-label required-label">开始时间</label>
                                    <input type="datetime-local" class="form-control" id="start_time" name="start_time"
                                           value="{{ form_data.start_time|default:'' }}" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="end_time" class="form-label">结束时间</label>
                                    <input type="datetime-local" class="form-control" id="end_time" name="end_time"
                                           value="{{ form_data.end_time|default:'' }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="location_name" class="form-label required-label">地点名称</label>
                                    <input type="text" class="form-control" id="location_name" name="location_name"
                                           value="{{ form_data.location_name|default:'' }}"
                                           placeholder="如：XX公园、XX咖啡馆" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="address" class="form-label required-label">详细地址</label>
                                    <input type="text" class="form-control" id="address" name="address"
                                           value="{{ form_data.address|default:'' }}"
                                           placeholder="请输入完整地址" required>
                                </div>
                            </div>

                            <!-- 地图选择 -->
                            <div class="mb-3">
                                <label class="form-label">地图选址</label>
                                <div class="map-controls">
                                    <div class="map-search-box">
                                        <input type="text" class="form-control" id="mapSearch"
                                               placeholder="搜索地点...">
                                    </div>
                                    <button type="button" class="btn-location" id="getCurrentLocation">
                                        <i class="fas fa-location-arrow"></i> <span id="locationText">我的位置</span>
                                    </button>
                                </div>
                                <div class="map-container">
                                    <div id="map"></div>
                                </div>
                                <div class="coordinates-display">
                                    <div>经度: <span id="longitudeDisplay">未选择</span></div>
                                    <div>纬度: <span id="latitudeDisplay">未选择</span></div>
                                </div>
                                <div class="location-info" id="locationInfo" style="display: none;">
                                    <strong>已选择位置:</strong> <span id="selectedAddress"></span>
                                </div>
                                <div class="map-tips">
                                    <i class="fas fa-info-circle"></i> 提示：点击地图选择位置，或使用搜索框搜索地点
                                </div>
                            </div>

                            <!-- 隐藏的经纬度字段 -->
                            <input type="hidden" id="longitude" name="longitude" value="{{ form_data.longitude|default:'' }}">
                            <input type="hidden" id="latitude" name="latitude" value="{{ form_data.latitude|default:'' }}">
                        </div>

                        <!-- 活动详情 -->
                        <div class="form-section">
                            <h3 class="section-title">
                                <i class="fas fa-clipboard-list"></i>活动详情
                            </h3>

                            <div class="mb-3">
                                <label for="highlights" class="form-label">活动亮点</label>
                                <textarea class="form-control" id="highlights" name="highlights"
                                          placeholder="每行一个亮点，例如：&#10;• 专业教练指导&#10;• 精美礼品赠送&#10;• 结交新朋友"
                                          rows="2">{{ form_data.highlights|default:'' }}</textarea>
                                <div class="form-text">每行输入一个活动亮点</div>
                            </div>

                            <div class="mb-3">
                                <label for="schedule" class="form-label">行程安排</label>
                                <textarea class="form-control" id="schedule" name="schedule"
                                          placeholder="每行一个安排，例如：&#10;• 14:00-14:30 签到&#10;• 14:30-15:30 主题活动&#10;• 15:30-16:00 自由交流"
                                          rows="2">{{ form_data.schedule|default:'' }}</textarea>
                                <div class="form-text">每行输入一个时间段的安排</div>
                            </div>

                            <div class="mb-3">
                                <label for="notes" class="form-label">注意事项</label>
                                <textarea class="form-control" id="notes" name="notes"
                                          placeholder="每行一个注意事项，例如：&#10;• 请准时到场&#10;• 建议穿着舒适服装&#10;• 自带水杯"
                                          rows="2">{{ form_data.notes|default:'' }}</textarea>
                                <div class="form-text">每行输入一个注意事项</div>
                            </div>
                        </div>

                        <!-- 活动图片 -->
                        <div class="form-section">
                            <h3 class="section-title">
                                <i class="fas fa-image"></i>活动图片
                            </h3>

                            <div class="mb-3">
                                <label class="form-label required-label">活动封面图</label>
                                <div class="image-upload-area" onclick="document.getElementById('image').click()">
                                    <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                                    <p class="mb-1">点击上传活动封面图片</p>
                                    <p class="text-muted small">支持 JPG、PNG 格式，建议尺寸 16:9</p>
                                </div>
                                <input type="file" class="form-control d-none" id="image" name="image"
                                       accept="image/*" required onchange="previewImage(this)">
                                <img id="imagePreview" class="image-preview" alt="预览图片">
                            </div>
                        </div>

                        <button type="submit" class="btn-create">
                            <i class="fas fa-rocket me-2"></i>发布活动
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/jquery_2.1.4_jquery.min.js"></script>
    <!-- 百度地图API -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=cb4Sj7ouHojzu3sHgnpJ6uDUWCPYeV3T"></script>
    <script>
        // 字符计数
        document.getElementById('title').addEventListener('input', function() {
            const count = this.value.length;
            document.getElementById('titleCount').textContent = count + '/200';
        });

        document.getElementById('description').addEventListener('input', function() {
            const count = this.value.length;
            document.getElementById('descriptionCount').textContent = count + '/不限';
        });

        // 图片预览
        function previewImage(input) {
            const preview = document.getElementById('imagePreview');
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        // 表单验证
        document.getElementById('activityForm').addEventListener('submit', function(e) {
    // 原有的时间验证
    const startTime = new Date(document.getElementById('start_time').value);
    const endTime = document.getElementById('end_time').value ? new Date(document.getElementById('end_time').value) : null;

    if (endTime && endTime <= startTime) {
        e.preventDefault();
        alert('结束时间必须晚于开始时间');
        return false;
    }

    // 参与人数验证
    const maxParticipants = parseInt(document.getElementById('max_participants').value);
    if (maxParticipants < 1 || maxParticipants > 1000) {
        e.preventDefault();
        alert('参与人数必须在1-1000之间');
        return false;
    }

    // 经纬度验证
    const longitude = document.getElementById('longitude').value;
    const latitude = document.getElementById('latitude').value;

    if (!longitude || !latitude) {
        e.preventDefault();
        alert('请在地图上选择活动地点');
        return false;
    }

    // 验证坐标是否为有效数字
    const lng = parseFloat(longitude);
    const lat = parseFloat(latitude);

    if (isNaN(lng) || isNaN(lat)) {
        e.preventDefault();
        alert('坐标数据无效，请重新选择地点');
        return false;
    }

    // 验证坐标范围（中国大致范围）
    if (lng < 73 || lng > 135 || lat < 18 || lat > 54) {
        e.preventDefault();
        alert('请选择中国范围内的地点');
        return false;
    }

    // 图片验证
    const imageInput = document.getElementById('image');
    if (!imageInput.files || imageInput.files.length === 0) {
        e.preventDefault();
        alert('请上传活动封面图片');
        return false;
    }

    // 验证图片类型
    const file = imageInput.files[0];
    const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
    if (!validTypes.includes(file.type)) {
        e.preventDefault();
        alert('请上传 JPG 或 PNG 格式的图片');
        return false;
    }

    // 验证图片大小（最大 5MB）
    if (file.size > 5 * 1024 * 1024) {
        e.preventDefault();
        alert('图片大小不能超过 5MB');
        return false;
    }
});

        // 初始化字符计数
        document.getElementById('title').dispatchEvent(new Event('input'));
        document.getElementById('description').dispatchEvent(new Event('input'));

        // 百度地图功能
        let map = null;
        let marker = null;
        let geocoder = null;
        let localSearch = null;
        let isGettingLocation = false;

        // 初始化地图
        function initMap() {
            // 创建地图实例
            map = new BMap.Map("map");

            // 初始化坐标（默认北京）
            const point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 12);

            // 启用滚轮缩放
            map.enableScrollWheelZoom(true);

            // 添加地图类型控件
            map.addControl(new BMap.MapTypeControl());

            // 添加缩放控件
            map.addControl(new BMap.NavigationControl());

            // 初始化地理编码器
            geocoder = new BMap.Geocoder();

            // 初始化本地搜索 - 修复搜索问题
            localSearch = new BMap.LocalSearch(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true,
                    selectFirstResult: false // 不自动选择第一个结果
                },
                pageCapacity: 5
            });

            // 监听搜索完成事件
            localSearch.setSearchCompleteCallback(function(results) {
                if (results && results.getNumPois() > 0) {
                    // 清除之前的标记
                    if (marker) {
                        map.removeOverlay(marker);
                    }

                    // 获取第一个搜索结果
                    const firstResult = results.getPoi(0);
                    const point = firstResult.point;

                    // 添加标记
                    marker = new BMap.Marker(point);
                    map.addOverlay(marker);

                    // 保存坐标到隐藏字段
                    document.getElementById('longitude').value = point.lng;
                    document.getElementById('latitude').value = point.lat;

                    // 更新坐标显示
                    document.getElementById('longitudeDisplay').textContent = point.lng.toFixed(6);
                    document.getElementById('latitudeDisplay').textContent = point.lat.toFixed(6);

                    // 反向地理编码获取地址
                    reverseGeocode(point);

                    // 自动填充地点名称
                    if (!document.getElementById('location_name').value) {
                        document.getElementById('location_name').value = firstResult.title;
                    }
                }
            });

            // 添加点击地图事件
            map.addEventListener("click", function(e) {
                addMarker(e.point);
                reverseGeocode(e.point);
            });

            // 如果有之前保存的坐标，显示标记
            const savedLng = document.getElementById('longitude').value;
            const savedLat = document.getElementById('latitude').value;
            if (savedLng && savedLat) {
                const point = new BMap.Point(parseFloat(savedLng), parseFloat(savedLat));
                addMarker(point);
                map.panTo(point);
                reverseGeocode(point);
            }
        }

        // 添加标记
        function addMarker(point) {
            // 移除之前的标记
            if (marker) {
                map.removeOverlay(marker);
            }

            // 创建新标记
            marker = new BMap.Marker(point);
            map.addOverlay(marker);

            // 保存坐标到隐藏字段
            document.getElementById('longitude').value = point.lng;
            document.getElementById('latitude').value = point.lat;

            // 更新坐标显示
            document.getElementById('longitudeDisplay').textContent = point.lng.toFixed(6);
            document.getElementById('latitudeDisplay').textContent = point.lat.toFixed(6);
        }

        // 反向地理编码（坐标转地址）
        function reverseGeocode(point) {
            geocoder.getLocation(point, function(result) {
                if (result) {
                    const address = result.address;
                    document.getElementById('selectedAddress').textContent = address;
                    document.getElementById('locationInfo').style.display = 'block';

                    // 自动填充地址字段
                    document.getElementById('address').value = address;

                    // 如果地点名称为空，自动填充
                    if (!document.getElementById('location_name').value) {
                        const locationName = extractLocationName(result);
                        document.getElementById('location_name').value = locationName;
                    }
                }
            });
        }

        // 从百度地图结果中提取地点名称
        function extractLocationName(result) {
            if (result.business) {
                return result.business;
            }
            if (result.street) {
                return result.street;
            }
            if (result.district) {
                return result.district;
            }
            return result.address.split(',')[0] || result.address;
        }

        // 搜索地点 - 修复搜索问题
        document.getElementById('mapSearch').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const keyword = this.value.trim();
                if (keyword) {
                    // 清除之前的搜索结果
                    localSearch.clearResults();

                    // 执行搜索
                    localSearch.search(keyword);
                }
                e.preventDefault();
            }
        });

        // 获取当前位置（使用百度地图IP定位）
        document.getElementById('getCurrentLocation').addEventListener('click', function() {
            if (isGettingLocation) return;

            const button = this;
            const locationText = document.getElementById('locationText');

            isGettingLocation = true;
            button.disabled = true;
            locationText.innerHTML = '<span class="loading-spinner"></span> 定位中...';

            // 使用百度地图的IP定位服务
            const geolocation = new BMap.Geolocation();

            geolocation.getCurrentPosition(function(result) {
                if (this.getStatus() === BMAP_STATUS_SUCCESS) {
                    const point = result.point;
                    addMarker(point);
                    map.panTo(point);
                    reverseGeocode(point);

                    showLocationMessage('定位成功！', 'success');
                } else {
                    // IP定位失败，使用城市定位
                    const cityLocation = new BMap.LocalCity();
                    cityLocation.get(function(result) {
                        const point = result.center;
                        addMarker(point);
                        map.panTo(point);
                        reverseGeocode(point);
                        showLocationMessage('已定位到您所在的城市', 'info');
                    });
                }

                // 恢复按钮状态
                isGettingLocation = false;
                button.disabled = false;
                locationText.textContent = '我的位置';
            }, {
                enableHighAccuracy: false,
                timeout: 10000,
                maximumAge: 600000
            });
        });

        // 显示定位消息
        function showLocationMessage(message, type) {
            const existingMessage = document.getElementById('locationMessage');
            if (existingMessage) {
                existingMessage.remove();
            }

            const messageDiv = document.createElement('div');
            messageDiv.id = 'locationMessage';
            messageDiv.className = `alert alert-${type} mt-2`;
            messageDiv.innerHTML = `
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
                ${message}
            `;

            document.querySelector('.map-controls').parentNode.insertBefore(messageDiv, document.querySelector('.map-controls').nextSibling);

            setTimeout(() => {
                if (messageDiv.parentNode) {
                    messageDiv.remove();
                }
            }, 3000);
        }

        // 当地点名称或地址改变时，尝试地理编码
        document.getElementById('location_name').addEventListener('blur', geocodeAddress);
        document.getElementById('address').addEventListener('blur', geocodeAddress);

        function geocodeAddress() {
            const address = document.getElementById('address').value ||
                           document.getElementById('location_name').value;

            if (address.trim()) {
                geocoder.getPoint(address, function(point) {
                    if (point) {
                        addMarker(point);
                        map.panTo(point);
                        document.getElementById('selectedAddress').textContent = address;
                        document.getElementById('locationInfo').style.display = 'block';
                    }
                });
            }
        }

        // 页面加载完成后初始化地图
        window.onload = initMap;
    </script>
{% endblock %}